<script setup>
import { onMounted, ref, defineEmits, getCurrentInstance } from 'vue'
import { formatTime } from '../../utils/time'
import request from '../../api/index'
const proxy = getCurrentInstance()?.proxy
const emits = defineEmits(['sUpdateDate'])
const props = defineProps(['sourceInfo', 'categoryName'])
const sUpdateDate = id => {
  emits('sUpdateDate', id)
}
const url = ref({
  delete: '/admin/share/deleteShare'
})
const deleteSource = id => {
  request.delete(url.value.delete + '/' + id).then(res => {
    if (res.data.status ==='success') {
      proxy.$message({ type:'success', duration: 1000,  message: res.data.message })
      sUpdateDate(id)
    } else {
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  })
}


</script>

<template>
  <div class="source-item">
    <yk-space :size="24">
      <yk-image
        :src="props.sourceInfo.image"
        width="240"
        height="160"
        :is-lazy="true"
      ></yk-image>
      <yk-space dir="vertical"  justify="between" style="width:100%;height:160px;">
        <yk-space :size="8" dir="vertical">
          <div class="source-title">{{ props.sourceInfo.title }}</div>
          <div class="source-create_time">{{ formatTime(props.sourceInfo.create_time) }}</div>
          <div class="source-category">{{ props.categoryName }}</div>
        </yk-space>
        <yk-space justify="between" style="width:100%;">
          <yk-space :size="24" align="center" >
            <div class="source-password">{{ props.sourceInfo.password }}</div>
            <div class="source-download"><IconDownloadOutline/> {{ props.sourceInfo.download }}</div>
          </yk-space>
          <yk-space :size="24" align="center" class="source-action">
            <yk-tooltip placement="topRight" title="编辑">
                <div class="source-edit"><IconFillOutline/></div>
              </yk-tooltip>
              <yk-popconfirm
                title="确认删除吗"
                content="删除后将无法恢复！！！"
                @confirm="deleteSource(props.sourceInfo.ID)"
              >
                <div class="source-delete"><IconDeleteOutline/></div>
              </yk-popconfirm>
          </yk-space>
        </yk-space>
      </yk-space>
    </yk-space>
  </div>
</template>

<style scoped lang='less'>
.source-item {
  width: 100%;
  height: 100%;
  padding: 24px;
  background-color: @bg-color-l;
  border-radius: 8px;

  &:hover {
   .source-action {
      opacity: 1;
    }
  }
  .source-title {
    font-size: 20px;
    font-weight: 600;
  }

  .source-create_time { 
    color: @gray-6;
  }

  .source-download {
    padding:3px 8px;
    height: 30px;
    line-height: 24px;
    border-radius: 999px;
    background-color: @gray-1;
  }

  .source-action {
    opacity: 0;
    font-size:20px;
    div {
      cursor: pointer;
      color: @gray-6;

      &:hover {
        color: @pcolor;
      }
    }
  }
}
</style>
